<template>
  <div class="home-swipe">
    <div
      class="home-top-bg"
      v-if="advertsList.length > 0 && pageConfig.backgroundImage"
      :style="{ backgroundImage: `url(${backgroundImage})` }"
    ></div>
    <!-- 轮播图 -->
    <van-swipe
      v-if="advertsList.length > 0"
      @change="handlerSwipeChange"
      :autoplay="3000"
      class="swipe"
      ref="mySwiper"
      :style="homeSwipeStyle"
    >
      <van-swipe-item
        v-for="(item, index) in advertsList"
        :key="index"
        class="swipe-item"
      >
        <img
          v-lazy="item.imageUrl"
          ref="swipeItemImg"
          class="swipe-item-img"
          @click.stop="handlerImageClick(item)"
        />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from 'vant'

export default {
  name: 'Swiper',
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
  data () {
    return {
      swipeIndex: 0,
      advertsList: [], // 轮播图
      advertsListShow: false
    }
  },
  computed: {
    pageConfig () {
      return this.$store.state.pageHomeConfig.HomeSwipe
    },
    backgroundImage () {
      return this.advertsList[this.swipeIndex].imageUrl
    },
    homeSwipeStyle () {
      return {
        width: this.$PxToRem(this.pageConfig.width),
        height: this.$PxToRem(this.pageConfig.height),
        borderRadius: this.$PxToRem(this.pageConfig.radius)
      }
    }
  },
  methods: {
    // 轮播图 change 事件
    handlerSwipeChange (index) {
      this.swipeIndex = index
    },
    // 获取幻灯片广告
    handlerAdverts () {
      this.advertsList = [
        {
          id: 1,
          title: '标题1',
          link: '',
          imageUrl: 'https://game.img.ismartgo.cn/test/231017/596f87d0-4299-4578-8a52-099e3569fe51.png'
        },
        {
          id: 2,
          title: '标题1',
          link: '',
          imageUrl: 'https://game.img.ismartgo.cn/test/231017/596f87d0-4299-4578-8a52-099e3569fe51.png'
        },
        {
          id: 3,
          title: '标题1',
          link: '',
          imageUrl: 'https://game.img.ismartgo.cn/test/231017/596f87d0-4299-4578-8a52-099e3569fe51.png'
        }
      ]
    },
    // 点击轮播图
    handlerImageClick (item) {
      // 如果是http 开头的 就是自定义路径
      if (/^http/.test(item.advLink)) {
        location.href = item.advLink
      } else {
        this.$router.push(item.advLink)
      }
    }
  },
  mounted () {
    this.handlerAdverts()
  }
}
</script>

<style lang="less" scoped>
@import url(./home-basics.less);

.home-swipe {
  padding: 16px 0;
  position: relative;
  .home-top-bg {
    position: absolute;
    top: -65px;
    width: 100%;
    height: 180px;
    filter: blur(10px);
    background-size: 110%;
  }

  // 轮播图
  .swipe {
    overflow: hidden;
    box-shadow: 0px 5px 10px 0px rgba(51, 51, 51, 0.24);
    margin: 0 auto;
    .swipe-item {
      .swipe-item-img {
        width: 100%;
        min-height: 100%;
      }
    }
  }
}
</style>
